<template>
  <div>
    <el-divider content-position="left">基本信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header">
            <span>
              <span v-if="selectMonth">截止{{ selectMonth }}</span>
              平均机龄
            </span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="isSelectMonth = true">选择年份 </el-button>
          </div>
          <div><span class="number">3.3</span><span>年</span></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header">
            <span>机队规模</span>
          </div>
          <div><span class="number">30</span><span>架</span></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header">
            <span>静态座位</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <template>
      <el-dialog title="选择截至月份" :visible.sync="isSelectMonth">
        <el-date-picker v-model="selectMonth" type="month" format="yyyy年 MM月" value-format="yyyy-MM"></el-date-picker>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isSelectMonth = false">取 消</el-button>
          <el-button type="primary" @click="onsubmit">确 定</el-button>
        </div>
      </el-dialog>
    </template>
    <el-divider content-position="left">生产计划</el-divider>
    <el-row style="height: 250px">
      <e-charts :option="option.hour"></e-charts>
    </el-row>
    <el-row>
      <div style="height: 200px" ref="echart1" id="main"></div>
    </el-row>
  </div>
</template>

<script>
import ECharts from "../../components/ECharts";

export default {
  name: "Home",
  components: {
    ECharts
  },
  mounted() {
    this.getTableData();
  },
  data() {
    return {
      isSelectMonth: false,
      selectMonth: "",
      option: {
        hour: {
          title: {
            text: "日均小时走势",
            textAlign: "auto"
          },
          tooltip: {},
          toolbox: {},
          dataZoom: [{}],
          dataset: {
            dimensions: ["flightDate", "ldsj", "rlyl"],
            source: []
          },
          xAxis: { type: "category" },
          yAxis: [{}, {}],
          series: [
            { name: "轮档小时", type: "bar", yAxisIndex: 0 },
            { name: "日利用率", type: "line", yAxisIndex: 1 }
          ]
        }
      }
    };
  },
  methods: {
    getTableData() {
      //获取昨天天日期
      let yesterdayDate = new Date(Date.now() - 24 * 60 * 60 * 1000);
      //获取昨天对应月份的1号日期。
      let fristDayOfMonth =
        yesterdayDate.getFullYear() + "-" + (yesterdayDate.getMonth() >= 9 ? yesterdayDate.getMonth() + 1 : "0" + (yesterdayDate.getMonth() + 1)) + "-" + "01";
      this.$http.get("/getHousBydate", { params: { sdate: fristDayOfMonth, edate: yesterdayDate.toLocaleDateString() } }).then(res => {
        res = res.data;
        console.log("sdate:" + fristDayOfMonth);
        console.log("edate:" + yesterdayDate.toLocaleDateString());
        console.log(res);
        console.log(res.data);
        this.option.hour.dataset.source = res.data;
      });
    },
    onsubmit() {
      this.isSelectMonth = false;
      console.log(this.selectMonth);
    }
  }
};
</script>
<style lang="scss" scoped>
.number {
  font-size: xx-large;
  font-weight: bolder;
}

.el-card {
  height: 150px;
}

#planChart {
  height: 300px;
}
</style>
